<template>
  <div class="operateRole">
    <div class="head">
      管理员管理》角色管理》{{type}}
    </div>
    <div class="formContent">
      <el-form :label-position="labelPosition" label-width="20%" :model="formLabelAlign">
        <el-form-item label="角色名称">
          <el-input v-model="formLabelAlign.name"></el-input>
          <el-button class="goManageProduct" @click="goBackManageProduct">返回</el-button>
        </el-form-item>
        <el-form-item label="角色描述">
          <el-input v-model="formLabelAlign.roleDescribe"></el-input>
        </el-form-item>
        <el-form-item label="权限">
          <el-checkbox v-model="formLabelAlign.all.checked" @change.native="allRightsManagement">所有权限</el-checkbox>
          <el-checkbox v-model="formLabelAlign.equipment.checked" @change.native="RightsManagement">设备管理</el-checkbox>
          <el-checkbox v-model="formLabelAlign.user.checked" @change.native="RightsManagement">用户管理</el-checkbox>
          <el-checkbox v-model="formLabelAlign.sort.checked" @change.native="RightsManagement">分类管理</el-checkbox>
          <el-checkbox v-model="formLabelAlign.product.checked" @change.native="RightsManagement">产品管理</el-checkbox>
          <el-checkbox v-model="formLabelAlign.admin.checked" @change.native="RightsManagement">管理员设置</el-checkbox>
          <el-checkbox v-model="formLabelAlign.contact.checked" @change.native="RightsManagement">联系我们</el-checkbox>
        </el-form-item>
      </el-form>
      <div>
        <el-button class="submitBtn" @click="opeRole">确定</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'operateRole',
  data () {
    return {
      type:'',//操作类型
      id:0,//编辑行id
      labelPosition: 'left',
      permissions:[],//存储所有权限id
      formLabelAlign: {//表单数据
          name: '',
          roleDescribe: '',
          all:{
            id:0,
            label:'所有权限',
            checked:false,
          },
          equipment:{
            id:0,
            label:'设备管理',
            checked:false,
          },
          user:{
            id:0,
            label:'用户管理',
            checked:false,
          },
          sort:{
            id:0,
            label:'分类管理',
            checked:false,
          },
          product:{
            id:0,
            label:'产品管理',
            checked:false,
          },
          admin:{
            id:0,
            label:'管理员设置',
            checked:false,
          },
          contact:{
            id:0,
            label:'联系我们',
            checked:false,
          },
        },
      // btnText:'',//按钮文字
      
    }
  },
  mounted(){
    let _this = this;
    _this.type = _this.$route.params.type == 'add'?'新增':'编辑';
    _this.id = _this.$route.params.id ;
    if(_this.id>=0){
      _this.getRoleInfo();//编辑初始化信息
      // let allMenuIds = _this.$store.state.permissions;

      // Object.keys(_this.formLabelAlign).forEach(key=>{
      //   if(allMenuIds[key.label] != undefined){
      //     _this.formLabelAlign[key].id = allMenuIds[key]
      //   }
      // });
      // //console.log(allMenuIds,_this.formLabelAlign);
    }
    _this.getAllPermissionsId();
    // _this.btnText = _this.$route.params.type == 'add'?'+':'更换';
  },
  methods:{
    //返回产品管理
    goBackManageProduct(){
      let _this = this;
      _this.$router.push({
        path:'/manageRole'
      });
    },
    //权限管理:全选
    allRightsManagement(){
      let _this = this;
      let bol = false;
      if(_this.formLabelAlign.all.checked){
        bol = true
      }else{
        bol = false
      }
      _this.formLabelAlign.equipment.checked = bol;
      _this.formLabelAlign.user.checked = bol;
      _this.formLabelAlign.sort.checked = bol;
      _this.formLabelAlign.product.checked = bol;
      _this.formLabelAlign.admin.checked = bol;
      _this.formLabelAlign.contact.checked = bol;
    },
    //权限选择
    RightsManagement(){
      let _this = this;
      let count = 0;
      Object.keys(_this.formLabelAlign).forEach(key=>{
        if(key != 'all'){
          if(_this.formLabelAlign[key].checked == false){
            _this.formLabelAlign.all.checked = false
          }else if(_this.formLabelAlign[key].checked){
            count += 1
          }
        }
      });
      if(count == 6){
        _this.formLabelAlign.all.checked = true
      }
    },
    //获取所有权限的id
    getAllPermissionsId(){
      let _this = this;
      let api = '/api/admin/menu/find_manager_menus';
      let sessionId = _this.$store.state.id;//获取token
      _this.axios.get(api,{
        headers:{
            sessionId,
          }
      }).then(res=>{
        //console.log('id列表返回',res);
        if(res.data.code == 401){
          _this.$message({
            type: 'info',
            message: '登录已失效，请重新登录'
          });  
          _this.$router.push({
            path:"/"
          });
          return
        }
        if(res.data.code == 403){
          _this.$message({
            type: 'info',
            message: res.data.status
          });  
          return
        }
        if(res.data.code == 200){
          
            res.data.data.bussData.forEach(item => {
              var key = item.id;
              var value = item.menuName
              // let obj = {}
              _this.permissions[value] = key;
            });
          console.log('所有权限的id',_this.permissions);
          _this.$store.dispatch('savePermissions',_this.permissions);//缓存登录状态 


          // //console.log(_this.contentData,'最终contentData');
        }
        
        



      });
    },
    //操作产品：新增或编辑
    opeRole(){
      let _this = this;
      if(_this.formLabelAlign.name == ''){
        _this.$message('请先填写角色');
        return
      }
      if(_this.formLabelAlign.roleDescribe == ''){
        _this.$message('请先填写角色描述');
        return
      }
      let api = '';
      let data = '';//传参
      let menuIds = [];
      let allMenuIds = _this.$store.state.permissions;
      Object.keys(_this.formLabelAlign).forEach(key=>{
        if(key != 'all'){
          if(_this.formLabelAlign[key].checked == true){
            menuIds.push(allMenuIds[_this.formLabelAlign[key].label])
          }
        }
      });
      console.log('allMenuIds',allMenuIds,'menuIds',menuIds);
      // let sessionId = _this.$store.state.id;//获取token
      if(_this.type == '新增'){
        api = '/api/admin/role/insert';
        data ={
              "menuIds": menuIds,
              "roleDesc": _this.formLabelAlign.name,
              "roleName": _this.formLabelAlign.roleDescribe,
          }
        
      }else{//编辑
        api = '/api/admin/role/update';
        data = {
            "id": _this.id,
            "menuIds":menuIds,
            "roleDesc": _this.formLabelAlign.name,
            "roleName": _this.formLabelAlign.roleDescribe,
        };
      }
      let sessionId = _this.$store.state.id;//获取token 
      _this.axios.post(api,data
      ,{
        headers:{
          sessionId
        }
      }
      ).then(res=>{
        //console.log('操作产品',res);
        if(res.data.code == 401){
          _this.$message({
            type: 'info',
            message: '登录已失效，请重新登录'
          });  
          _this.$router.push({
            path:"/"
          });
          return
        }
        if(res.data.code == 500){
            _this.$message(res.data.data.errMsg);
            return
          }
        if(res.data.code == 200){
          _this.$message({
            type: 'success',
            message: _this.type+'成功！'
          }); 
          _this.$router.push({
            path:"/manageRole"
          });
        }
      });
    },
    //编辑信息时初始化时获取信息详情
    getRoleInfo(){
      let _this = this;
      let api = '/api/admin/role/find_detail?id='+_this.id;
      let sessionId = _this.$store.state.id;//获取token
      _this.axios({
            url:api,
            method: 'post',
            headers:{
              sessionId,
            }		
  			}).then(res=>{
        //console.log('编辑初始化角色信息',res);
        // if(res.data.code == 401){
        //     _this.$message({
        //       type: 'info',
        //       message: '登录已失效，请重新登录'
        //     });  
        //     _this.$router.push({
        //       path:"/"
        //     });
        //     return
        //   }
        if(res.data.code == 200){
          // _this.formLabelAlign = res.data.data.bussData;
          let data = res.data.data.bussData;
          _this.formLabelAlign.name = data.roleName;
          _this.formLabelAlign.roleDescribe = data.roleDesc;
          let arr = data.topMenuName.split(',');
          let count = 0
          Object.keys(_this.formLabelAlign).forEach(key=>{
            if(arr.indexOf(_this.formLabelAlign[key].label)>-1){
              _this.formLabelAlign[key].checked = true
              count += 1
            }
          })
          if(count == 6){
              _this.formLabelAlign.all.checked = true;
          }
        }
      });
    }
  }
}
</script>

<style scoped>
/* 整体样式 */
.operateRole{
  height: 94%;
  width: 94%;
  border: .0625rem solid rgba(187, 187, 187, 1);
  margin: 0 auto;
  position: relative;
  padding: 1%;
  font-size: .875rem;
  color:rgba(16, 16, 16, 1) !important;

}
/* 按钮 */
.operateRole>>>button{
  color:rgba(16, 16, 16, 1) !important;
}
/* 表单 */
.operateRole>>>.formContent{
  width: 80%;
  margin: 0 auto;
  position: absolute;
  top: 15%;
  left: 15%;
}
/* 输入框 */
.operateRole>>>.formContent .el-input,.formContent .el-select{
  width: 30%;
} 
.operateRole>>>.formContent .el-select .el-input{
  width: 100%;
}
/* 返回按钮 */
.operateRole>>>.goManageProduct{
  position: absolute;
  top: 0%;
  left: 74%;
}
/* 选择框 */
.operateRole>>>.el-form-item__content>label{
  display: block;
}
/* 提交表单按钮 */
.operateRole>>>.submitBtn{
  position: absolute;
  bottom: -15%;
  left: 32%;
}

</style>
